前言

嗨，我是Hogan
目前在經營自己的自媒體 hogan.tech
主要分享一些有關於程式碼、軟體和科技業經驗分享
有興趣的讀者可以進一步關注我，進而獲得更多資訊唷！

未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系 繁體中文、英文、日文、簡體中文
觀看分類：React 白話文運動、其他系列

如果想要快速查找其他文章請點選目錄

成立 hogan.tech 的初衷是
希望每個正在這條路上探索的人，
都可以透過 Hogan.tech 嘗試進入程式領域。

前一篇文章介紹了非同步的JavaScript

1. 非同步
2. Promise & Fetch
3. Async & Await
4. 建構Promise 物件

這一篇則是會介紹非常重要的JavaScript函式概念-高階函式（Higher-order function）

1. 函式導向是什麼？
2. 純函式（Pure function）
3. 高階函式（Higher-order function）
4. 柯理化（Currying）

函式導向是什麼？

所謂的函式導向，一言以蔽之，函式本身就是一個變數。舉例來說：函數本身可以使用const、let、var去做宣告，並且可以變成一個引數（Argument）傳入其他的韓式裡面，也可以將他加進陣列、物件裡面。

將函數變成一個引數傳到其他函數

const print = (message) => {
    console.log(`print function with ${message}`)
}

const helloMessage = () => {
    return "Hello Message"
}

print(helloMessage());
// print function with Hello Message

加入陣列

const array = ["item0", (message) => console.log("I'm item function in array " + message)]

console.log(array[0]);
// item0
array[1]("argument");
// I'm item function in array argument

加入物件

const object = {
    helloWorld: "Hello World",
    print: (message) => {
        console.log(`print function with ${message}`)
    }
}

object.print(object.helloWorld);
// print function with Hello World

純函式（Pure function）

當一個函數只受引數（Argument）的影響時，我們稱為純函數（Pure function）。這樣的純函數，因為不會受到其他干擾，這樣的函數具有封裝性，不會受到其他變數以及引數的干擾，也就是會有副作用（Side Effect）

所謂的副作用（Side Effect）指的是函數在執行過程中產生了外部的變化

1. 使用Date.now() 或是 Math.random()
2. 使用console.log()
3. 修改外部資料
4. 操作DOM
5. 發起一個HTTP Request

來看以下的例子，這個例子為一個非純韓式，且當修改外部的資料，則函式會受影響

let y = 1;

function xAdd(x) {
    return x + y;
};
xAdd(5); //6

可以看到即便是執行了 xAdd(5) 也會因為y的改變，導致執行結果不同。

因此應該將函式變成一個有封裝性，不受外部影響的純函式

function sum(x, y) {
    return x + y;
};
sum(1,2); //3

純函式的好處除了擁有獨立性以外，也可以更容易寫測試。

高階函式（Higher-order function）

高階函式（Higher-order function）是指「接受或是回傳函式」的函式。所謂的接受是指將函式作為引數（Argument）進入一個函式。回傳函式（Call back function）則是將一個函式作為變數值回傳。

上面的函數導向介紹，就是其中一個例子，讓我們在複習一下

const print = (message) => {
    console.log(`print function with ${message}`)
}

const helloMessage = () => {
    return "Hello Message"
}

print(helloMessage());
// print function with Hello Message

不過高階函式可以讓我們處理更多方便且複雜的情況

const printNameByCondition = (condition, trueFunc, falseFunc) => {
    condition ? trueFunc() : falseFunc();
}

const printHogan = () => console.log("Hello Hogan");
const printBobo = () => console.log("Hello BoBo");

printNameByCondition(true, printHogan, printBobo);
// Hello Hogan
printNameByCondition(false, printHogan, printBobo);
// Hello BoBo

這邊可以看到，我建立了一個函數，裡面有三個引數（Argument），其中後兩者為函數。

透過第一個引述，來去做判斷，如果是true的情況，執行第一個函數，否則就是執行第二個函數。

柯理化（Currying）

在高階函式中，柯理化（Currying）是一個特殊且重要的技巧。可以分別將一個高階函式中，不同階層的引數傳入，也可以透過此概念，為一個高階函數新增前綴（prefix）

const userLogs = userName => message => console.log(`${userName} -> ${message}`)

const log1 = userLogs("Hogan");
log1("Hello World");
log1("Hello");

const log2 = userLogs("Bobo");
log2("Hello World");
log2("Hello");

這邊也使用一個範例來實作，其中也有給了兩個不同的高階函式的前綴（prefix）

結語

這篇講解了，函式導向的概念以及一些高階函式實作，另外也用了比較小的篇幅介紹了柯理化（Curring）是一個什麼樣的功能，也針對純函數（Pure Function）做了一個介紹

如果有任何建議與疑問也歡迎留言！

如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～